<template>
    <div class="calculator">
      <div class="display">{{ currentDisplay }}</div>
      
      <div class="buttons">
        <button @click="clear" class="operator">C</button>
        <button @click="toggleSign" class="operator">±</button>
        <button @click="percent" class="operator">%</button>
        <button @click="setOperation('÷')" class="operator">÷</button>
        
        <button @click="appendNumber(7)">7</button>
        <button @click="appendNumber(8)">8</button>
        <button @click="appendNumber(9)">9</button>
        <button @click="setOperation('×')" class="operator">×</button>
        
        <button @click="appendNumber(4)">4</button>
        <button @click="appendNumber(5)">5</button>
        <button @click="appendNumber(6)">6</button>
        <button @click="setOperation('-')" class="operator">-</button>
        
        <button @click="appendNumber(1)">1</button>
        <button @click="appendNumber(2)">2</button>
        <button @click="appendNumber(3)">3</button>
        <button @click="setOperation('+')" class="operator">+</button>
        
        <button @click="appendNumber(0)" class="span-2">0</button>
        <button @click="appendDecimal">.</button>
        <button @click="calculate" class="operator">=</button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  
  interface CalculatorState {
    currentValue: string
    previousValue: number | null
    operation: string | null
    waitingForNewInput: boolean
  }
  
  const state = ref<CalculatorState>({
    currentValue: '0',
    previousValue: null,
    operation: null,
    waitingForNewInput: true
  })
  
  const currentDisplay = computed(() => {
    const num = parseFloat(state.value.currentValue)
    return isNaN(num) ? '0' : num.toLocaleString(undefined, {
      maximumFractionDigits: 8
    })
  })
  
  const appendNumber = (num: number) => {
    if (state.value.waitingForNewInput) {
      state.value.currentValue = num.toString()
      state.value.waitingForNewInput = false
    } else {
      state.value.currentValue = state.value.currentValue === '0' 
        ? num.toString() 
        : state.value.currentValue + num
    }
  }
  
  const appendDecimal = () => {
    if (state.value.waitingForNewInput) {
      state.value.currentValue = '0.'
      state.value.waitingForNewInput = false
    } else if (!state.value.currentValue.includes('.')) {
      state.value.currentValue += '.'
    }
  }
  
  const setOperation = (operation: string) => {
    state.value.previousValue = parseFloat(state.value.currentValue)
    state.value.operation = operation
    state.value.waitingForNewInput = true
  }
  
  const calculate = () => {
    if (!state.value.operation || state.value.previousValue === null) return
    
    const current = parseFloat(state.value.currentValue)
    const previous = state.value.previousValue
    
    let result: number
    switch (state.value.operation) {
      case '+':
        result = previous + current
        break
      case '-':
        result = previous - current
        break
      case '×':
        result = previous * current
        break
      case '÷':
        result = previous / current
        break
      default:
        return
    }
  
    state.value.currentValue = result.toString()
    state.value.previousValue = null
    state.value.operation = null
    state.value.waitingForNewInput = true
  }
  
  const clear = () => {
    state.value.currentValue = '0'
    state.value.previousValue = null
    state.value.operation = null
    state.value.waitingForNewInput = true
  }
  
  const toggleSign = () => {
    state.value.currentValue = (parseFloat(state.value.currentValue) * -1).toString()
    state.value.waitingForNewInput = false
  }
  
  const percent = () => {
    state.value.currentValue = (parseFloat(state.value.currentValue) / 100).toString()
    state.value.waitingForNewInput = false
  }
  </script>
  
  <style scoped lang="scss">
  .calculator {
    width: 320px;
    background: #2c3e50;
    /* border-radius: 10px; */
    padding: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
  }
  
  .display {
    background: #ecf0f1;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: right;
    font-size: 2em;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  button {
    padding: 20px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    background: #34495e;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  button:hover {
    background: #3b4d5e;
  }
  
  button.operator {
    background: #3498db;
  }
  
  button.operator:hover {
    background: #2980b9;
  }
  
  button.span-2 {
    grid-column: span 2;
  }
  </style>